<template>
  <div>
    <div class="text-h4 tw-mb-4 tw-m-5" style="padding-left: 3px;border-left: 5px solid #3370FF;">
      信息
    </div>
    <div class="tw-grid tw-grid-cols-2 tw-m-5 tw-gap-10 ">
      <div class="  tw-grid tw-grid-cols-3 tw-border tw-rounded-2xl">
        <div v-if="uinfo" class="tw-text-left tw-ml-12 tw-mt-10">
          <q-icon color="primary" name="perm_identity" class="tw-text-2xl"/>
          <span class="tw-text-gray-400">姓名: </span>
          {{ uinfo.sname }}
        </div>
        <div class=" tw-text-left tw-ml-12 tw-mt-10">
          <q-icon color="primary" name="school" class="tw-text-2xl"/>
          <span class="tw-text-gray-400">学院: </span>
          <span class="tw-text-gray-700">{{ uinfo.dept }}</span>
        </div>
        <div class=" tw-text-left tw-ml-12 tw-mt-10 ">
          <q-icon color="primary" name="work" class="tw-text-2xl"/>
          <span class="tw-text-gray-400">专业: </span>
          <span class="tw-text-gray-700">{{ uinfo.major }}</span>
        </div>
        <div class=" tw-text-left tw-ml-12 tw-mt-10">
          <q-icon color="primary" name="class" class="tw-text-2xl"/>
          <span class="tw-text-gray-400">班级: </span>
          <span class="tw-text-gray-700">{{ uinfo.classnum }}</span>
        </div>
        <div class=" tw-text-left tw-ml-12 tw-mt-10">
          <q-icon color="primary" name="mail_outline" class="tw-text-2xl"/>
          <span class="tw-text-gray-400">邮箱: </span>
          <span class="tw-text-gray-700">{{ uinfo.email }}</span>
        </div>
        <div class=" tw-text-left tw-ml-12 tw-mt-10">
          <q-icon color="primary" name="person" class="tw-text-2xl"/>
          <span class="tw-text-gray-400">学号: </span>
          <span class="tw-text-gray-700">{{ uinfo.snum }}</span>
        </div>
        <div class=" tw-text-left tw-ml-12 tw-mt-10">
          <q-icon color="primary" name="bookmark_border" class="tw-text-2xl"/>
          <span class="tw-text-gray-400">qq: </span>
          <span class="tw-text-gray-700">{{ uinfo.qq }}</span>
        </div>
        <div class=" tw-text-left tw-ml-12 tw-mt-10">
          <q-icon color="primary" name="phone" class="tw-text-2xl"/>
          <span class="tw-text-gray-400">手机: </span>
          <span class="tw-text-gray-700">{{ uinfo.tel }}</span>
        </div>
        <div class=" tw-text-left tw-ml-12 tw-mt-10">
          <q-icon color="primary" name="star" class="tw-text-2xl"/>
          <span class="tw-text-gray-400">身份: </span>
          <span class="tw-text-gray-700">{{ uinfo.role === 'stu' ? '学生' : '老师' }}</span>
        </div>
      </div>
      <div class="tw-border tw-rounded-2xl">
        <div id="container"></div>
      </div>
    </div>
    <q-separator class="tw-m-10"/>
    <div class="text-h4 tw-m-5 " style="padding-left: 3px;border-left: 5px solid #3370FF;">
      最近选题发布
    </div>
    <div class="row justify-center">

      <div class="col-12 ">
        <q-card class="tw-w-11/12 tw-m-5 tw-h-full tw-border tw-rounded-2xl"
                style="min-height: 600px;overflow: scroll ;max-height: 400px;overflow-x: hidden" flat>
          <q-card-section v-if="recent">
            <q-list class="tw-h-full">
              <q-item v-for="(item,idx) in recent" :key="idx">
                <q-expansion-item class="tw-p-4 tw-my-4 tw-w-full tw-border-l-4 tw-border-gray-300 tw-bg-gray-50"
                                  :label="item.pname">
                  <q-card>
                    <q-card-section>
                      <div class="text-h6 tw-mb-4" style="padding-left: 3px;border-left: 5px solid #3370FF;">
                        课题信息
                      </div>
                      <div>
                        <span class="tw-text-gray-400">课题： </span>
                        {{ item.pname }}
                      </div>
                      <div>
                        <span class="tw-text-gray-400">课题详情： </span>
                        {{ item.pdesc }}
                      </div>
                      <div>
                        <span class="tw-text-gray-400">发布时间： </span>
                        {{ date.formatDate(item.created_time, 'YYYY-MM-DD hh:ss') }}
                      </div>
                      <div>
                        <span class="tw-text-gray-400">状态： </span>
                        {{ item.status === 0 ? '未选' : '已选' }}
                      </div>
                    </q-card-section>
                  </q-card>

                </q-expansion-item>
              </q-item>
            </q-list>
          </q-card-section>

        </q-card>
      </div>
    </div>
  </div>
</template>

<script setup>
import {onMounted, ref} from "vue";
import {Liquid} from '@antv/g2plot';

import {api} from "boot/axios";
import {date} from "quasar";

let info = ref(null)
let statistics = ref(null)
let recent = ref(null)
let uinfo = JSON.parse(localStorage.getItem('info'))
onMounted(() => {

  api({
    url: '/job/project/getStatistics',
    method: 'get'
  }).then(res => {
    statistics.value = res.data.data
    return statistics.value
  }).then((statistics) => {
    const liquidPlot = new Liquid('container', {
      percent: statistics.avail / statistics.total,
      outline: {
        border: 4,
        distance: 8,
      },
      //title
      statistic: {
        title: {
          formatter: () => '可选题目',
          style: {
            fontSize: '14px',
            fill: '#545454',
            textAlign: 'center',
          },
        },
        content: {
          style: {
            fontSize: '20px',
            fill: '#545454',
            textAlign: 'center',
          },
          formatter: () => `${statistics.avail}/${statistics.total}`,
        },
      },
    });
    liquidPlot.render();
  })

})


api({
  url: '/job/student/getinfo?' + new URLSearchParams({uname: uinfo.snum}).toString(),
  method: 'get'
}).then(res => {
  info.value = res.data.data
})

api({
  url: '/job/project/getrecent?' + new URLSearchParams({dept: uinfo.dept}).toString(),
  method: 'get'
}).then(res => {
  recent.value = res.data.data
})

</script>

<style scoped>

</style>
